import { $ } from './library/jquery-module.js';
import './library/jquery-extend-tabs.js';
import './library/jquery-extend-magnifier.js';
import './library/jquery-extend-list-slider.js';
import cookie from './library/cookie.js';
// import { parse } from 'cookie';

$(function() {
    // 商品详情页渲染
    let goodsid = location.search.split('=')[1];
    $.ajax({
        async: false,
        type: "get",
        url: "../../interface/goods.php",
        data: { goodsid },
        dataType: "json",
        success: function(res) {
            let temp = '';
            let pics = JSON.parse(res.picture);
            let goodstitle = JSON.parse(res.title);
            let goodstype = JSON.parse(res.type);
            let goodsstock = parseInt(res.num);
            window.goodsstock = goodsstock;
            temp = `<div class="good-appear">
                    <div class="good-img">
                        <div class="good-img-magni">
                            <img src="../${pics[0].src}" />
                            <div class="good-slide"></div>
                        </div>
                        <ul class="good-img-list">
                            <li class="selected"><img src="../${pics[0].src}" /></li>
                            <li><img src="../${pics[1].src}" /></li>
                            <li><img src="../${pics[2].src}" /></li>
                            <li><img src="../${pics[3].src}" /></li>
                        </ul>
                        <div class="magnifier-img">
                            <img class="big-img" src="../${pics[0].src}" />
                        </div>
                    </div>
                    <div class="good-collect">
                        <i class="iconfont">&#xe75a;</i>
                        <span>收藏商品</span>
                        <span>（169775人气）</span>
                    </div>
                </div>
                <div class="good-detail">
                    <div class="good-name">
                        <h1>
                            ${goodstitle[0].name}
                        </h1>
                        <p>
                            ${goodstitle[1].function}</p>
                    </div>
                    <div class="good-price">
                        <span>价格</span>
                        <span>￥</span>
                        <span>${res.price}</span>
                    </div>
                    <div class="good-send-addr">
                        <span>运费</span>
                        <span>
                            <span>日本 至 菜鸟广州保税21号仓 至</span>
                            
                        </span>
                    </div>
                    <div class="good-evaluate">
                        <span>累计评价</span>
                        <span>9359</span>
                    </div>
                    <div class="good-choose">
                        <div class="good-version">
                            <span class="title">
                                化妆品净含量
                            </span>
                            <div class="good-cap">
                                <div class="good-p">
                                    <span class="goods-volume choosen">
                                        <span>${goodstype[0]}</span>
                                        <img src="../img/goods-selected.png" alt="">
                                    </span>
                                </div>
                                <div class="good-p">
                                    <span class="goods-volume unchoosen">
                                        <span>${goodstype[1]}</span>
                                        <img src="../img/goods-selected.png" alt="">
                                    </span>
                                </div>
                                <!-- <div class="good-p">
                                    <span class="goods-volume unchoosen">
                                        200ml新条码
                                        <img src="../img/goods-selected.png" alt="">
                                    </span>
                                </div> -->
                            </div>
                        </div>
                        <div class="good-buy-count">
                            <span class="title">
                                数量
                            </span>
                            <input type="text" value="1" id="goods-num" class="good-num">
                            <span class="control-count">
                                <i class="iconfont add-num" >&#xe7c1;</i>
                                <i class="iconfont reduce-num ">&#xe7c3;</i>
                            </span>
                            <span>
                                件
                            </span>
                        </div>
                        <div class="buy-ways clearfloat">
                            <div class="buy-now">
                                <span>
                                    立即购买
                                </span>
                            </div>
                            <div class="buy-later">
                                <span id="add-trolley">
                                    <i class="iconfont">&#xe6aa;</i> 加入购物车
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="service-pro clearfloat">
                        <span class="title">
                            服务承诺
                        </span>
                        <ul class="pro-list">
                            <li>
                                <a href="#">过敏包退</a>
                            </li>
                            <li>
                                <a href="#">破损包退</a>
                            </li>
                            <li>
                                <a href="#">正品保障</a>
                            </li>
                            <li>
                                <a href="#">进口保税</a>
                            </li>
                            <li>
                                <a href="#">赠运费险</a>
                            </li>
                        </ul>
                        <span class="pay-ways">
                            支付方式
                        </span>
                    </div>
                    <div class="buy-warn">
                        检测到您当前处于非安全网络环境，部分商品信息可能不准确，请在交易支付页面再次确认商品价格信息。
                    </div>
                </div>`

            $('.good-msg').append(temp).find('#add-trolley').on('click', function() {
                addItem(res.id, res.price, $('#goods-num').val(), $('.choosen').children('span').html());
                // console.log($('.choosen').children('span').html());
            });
        }
    });

    // 加入购物车的商品id 价格 数量 型号
    function addItem(id, price, num, edition) {
        let trolley = cookie.get('trolley');
        let goods = {
            id,
            price,
            num,
            edition
        }

        if (trolley) {
            trolley = JSON.parse(trolley);
            // 判断当前所选商品id和型号在cookie中是否已存在
            let flag = trolley.some(function(elm) {
                return elm.id == id && elm.edition == edition;
            });
            if (flag) {
                trolley.forEach(function(elm) {
                    elm.id == goods.id && elm.edition == goods.edition ? elm.num = parseInt(elm.num) + parseInt(num) : null;
                });
            } else {
                trolley.push(goods);
            }

        } else {
            // 没有存cookie的情况
            trolley = []; //初始化成数组
            trolley.push(goods);
        }
        cookie.set('trolley', JSON.stringify(trolley), 1);
    }

    // 放大镜
    $('.good-img').magnifier();

    // 选购商品类型
    $('.good-cap>.good-p').on('click', 'span', function() {
        $(this).removeClass('unchoosen').addClass('choosen');
        $(this).parent().siblings().children('span').removeClass('choosen').addClass('unchoosen');
    });

    // 选购商品数量输入
    $('.good-num').on('change', function() {
        let innum = $(this).val();
        if (parseInt(innum) < 1 || !parseInt(innum)) {
            $(this).val(1);
        } else if (parseInt(innum) > goodsstock) {
            alert('超出库存数量，请重新选择');
            $(this).val(goodsstock);
            num = parseInt(innum);
        } else {
            $(this).val(parseInt(innum));
            num = parseInt(innum);
        }
    });

    // 选购商品数量
    let num = $('.good-num').val();
    $('.add-num').on('click', function() {
        num++;
        if (num > goodsstock) {
            num = goodsstock;
            alert('超出库存数量，请重新选择');
        }
        $('.good-num').val(num);
    });

    $('.reduce-num').on('click', function() {
        num--;
        if (num < 1) {
            num = 1;
        }
        $('.good-num').val(num);
    });

    // 看了又看
    $('.buy-more-goods').slider();

    // 商品详请、累计评价、服务详请切换
    $('.shop-good-intro').tabs({
        ev: 'click',
        active: 'active',
        show: 'show'
    });
    // 宝贝排行切换
    $('.goods-ranking').tabs({
        ev: 'mouseover',
        active: 'active',
        show: 'show'
    });

    // 用户成功登录
    if (cookie.get('username') && cookie.get('isLogined')) {
        $('.fir-left').children('a').eq(0).text('Hi , ' + cookie.get('username'))
        $('.fir-left').children('a').eq(1).css('display', 'none');
        $('.fir-left').children('span').css('display', 'none');
    }
});